<template>
	<view class="inviteFriends">
		<view class="backImg">
			<view class="backImg-left">
				<view @tap="back" class="backImg-left">
					<image src="@/static/user/back.png" mode="widthFix"></image>
				</view>
			</view>
			<view>分享匠想科技</view>
			<view class="backImg-right"></view>
		</view>
		<view class="bgImg"></view>
		<view class="share">
			<image src="../../../static/user/inviteFriendsbg.png" mode="widthFix" class="share-img"></image>
			<view class="box">
				<view class="header-img">
					<image v-if="userDetails.headPortraitUrl" :src="pathImg+userDetails.headPortraitUrl" class="img"></image>
					<image v-else src="../../../static/common/noLogin.png" class="img"></image>
				</view>
				<view class="nickName">{{userDetails.nickname||'匠想科技'}}</view>
		<!-- 		<view class="referCode">
					<view class="">邀请码</view>
					<view class="code">{{userDetails.referralCode}}</view>
					<view class="btn" @tap="copy">复制</view>
				</view> -->
				<view style="display: flex;justify-content: center;padding-top: 44upx;">
					<view class="qrcode">
						<canvas id="qrcode1" canvas-id="qrcode1" />
					</view>
				</view>
				<view class="tips">您的好友{{userDetails.nickname}}邀请您加入匠想科技</view>
			</view>
		</view>
		<view class="bottom-btn" style="font-size: 30upx;">
			<view class="share-btn" @tap="goInvitationPoster">
				生成邀请海报
			</view>
			<view class="share-btn" @tap="goInvitationPosterToClipboard" style="margin-top:10upx;">
				复制邀请链接
			</view>

		</view>
		<!-- 邀请码海报 -->
		<u-popup :show="isShowPoster" :overlayStyle="{background:'rgba(0,0,0,.7)'}" :customStyle="{width:'670upx'}"
			mode="center" @close="close">
			<!-- #ifdef H5 -->
			<view class="con-box33">
				<view class="main" id="box">
					<view class="code">
						<view class="code_left">
							<view class="userTop">
								<image v-if="userDetails.headPortraitUrl" :src="pathImg+userDetails.headPortraitUrl" class="img"></image>
								<image v-else src="../../../static/common/noLogin.png" class="img">
								</image>
									<view class="userName">
										{{userDetails.nickname}}
									</view>
							</view>
							<view class="text">
								扫描二维码开启数字化购物平台之旅
							</view>
							<view class="InvitationCode">
								我的邀请码：{{userDetails.referralCode}}
							</view>
						</view>
						<view class="code_right">
							<canvas id="qrcode" canvas-id="qrcode" class="qrcode" />
						</view>
					</view>
					<img src="../../../static/user/inviteFriends2.png" class="code_img"></img>
					<!-- <img src="../../static/user/posterLogo.png" mode="widthFix" class="logo_img"></img> -->

				</view>
				<view class="guanbi" @tap="close()"></view>
				<view class="container_text">长按保存</view>
				<view class="imgBlob">
					<image :src="imgBlobData" style="position: absolute;top: 0;left: 0;"></image>
				</view>
			</view>
			<!-- #endif -->
		</u-popup>
		<u-toast ref="uToast"></u-toast>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import html2canvas from "html2canvas";
	import uQRCode from '@/common/uqrcode.js'
	import {
		getUsedCode,
		getReferralCode,
	} from '@/api/user.js'
	import {
		getUser
	} from '@/api/login.js'
	export default {
		data() {
			return {
				modeShow: false,
				imgBlobData: "",
				codeStr: "",
				userDetails: {},
				isShowPoster: false,
				size: 110,
				margin: 3,
			}
		},
		async onShow() {
			let res = await getUser()
			if (res.status == 200) {
				this.userDetails = res.data.user;
				this.shareFx();
			}
		},
		methods: {
			isStyle(data, izSellOut) {
				return {
					'paddingTop': this.paddingTop + 'px'
				}
			},
			copy() {
				uni.setClipboardData({
					data: this.userDetails.referralCode || '',
					success: () => {
						this.$u.toast('复制成功！');
					}
				});
			},
			close() {
				this.isShowPoster = false
			},
			// 生成图片
			shareFx() { //生成分享二维码
				let urls = location.origin;
				console.log(urls, '000');
				let that = this;
				setTimeout(() => {
					let modules = uQRCode.getModules({
						text: urls + "/#/pages/login/register?from=poster&code=" + that.userDetails.referralCode +
							"&agentChannelCode=" + that.userDetails.agentChannelCode,
						errorCorrectLevel: uQRCode.errorCorrectLevel.L
					})
					// let tileSize = 3.7;
					let tileSize = (that.size - that.margin * 2 - 4.5) / modules.length
					// 获取绘图所需的上下文
					let ctx = uni.createCanvasContext('qrcode1', that)
					// 开始绘制
					ctx.setFillStyle('#FFFFFF')
					// ctx.fillRect(0, 0, 67, 67);
					ctx.fillRect(0, 0, that.size, that.size)
					for (var row = 0; row < modules.length; row++) {
						for (var col = 0; col < modules.length; col++) {
							// 计算每一个小块的位置
							var x = col * tileSize + that.margin
							var y = row * tileSize + that.margin
							var w = tileSize
							var h = tileSize

							var style = modules[row][col] ? '#000000' : '#FFFFFF'
							ctx.setFillStyle(style)
							ctx.fillRect(x, y, w, h)
						}
					}
					console.log('执行了')
					ctx.draw();
					// this.goPoster();
					return;
				}, 200)
			},
			// 拷贝邀请链接
			goInvitationPosterToClipboard(){
				let urls = location.origin;
				const link = urls + "/#/pages/login/register?from=poster&code=" + this.userDetails.referralCode +
								"&agentChannelCode=" + this.userDetails.agentChannelCode;
				uni.setClipboardData({
								data: link
							});
			},
			// 生成邀请海报
			goInvitationPoster() {
				console.log('000000')
				this.$refs.min_loading.open('生成中...');
				if (this.userDetails.referralCode) {
					this.isShowPoster = true;
					let that = this;
					// #ifdef H5
					let urls = location.origin;
					setTimeout(() => {
						let modules = uQRCode.getModules({
							text: urls + "/#/pages/login/register?from=poster&code=" + that.userDetails.referralCode +
								"&agentChannelCode=" + that.userDetails.agentChannelCode,
							errorCorrectLevel: uQRCode.errorCorrectLevel.L
						})

						// let tileSize = 1.92
						let tileSize = (100 - that.margin * 4 - 4.5) / modules.length
						// 获取绘图所需的上下文
						let ctx = uni.createCanvasContext('qrcode', that)
						// 开始绘制
						ctx.setFillStyle('#FFFFFF')
						ctx.fillRect(0, 0, 90, 90)
						// ctx.fillRect(0, 0, 67, 67);
						for (var row = 0; row < modules.length; row++) {
							for (var col = 0; col < modules.length; col++) {
								// 计算每一个小块的位置
								var x = col * tileSize + that.margin
								var y = row * tileSize + that.margin
								var w = tileSize
								var h = tileSize

								var style = modules[row][col] ? '#000000' : '#FFFFFF'
								ctx.setFillStyle(style)
								ctx.fillRect(x, y, w, h)
							}
						}
						ctx.draw()
					}, 200)
					setTimeout(() => {
						that.download();
						// uni.hideLoading();
						that.$refs.min_loading.close();
					}, 2000)
					// #endif
					// #ifdef APP-PLUS
					that.download();
					// #endif
				} else {
					this.$refs.min_loading.close();
					return;
				}
			},
			// 保存邀请海报
			async download() {
				// #ifdef H5
				const convertToImage = (container, options = {}) => {
					// 设置放大倍数
					const scale = window.devicePixelRatio;
					// 传入节点原始宽高
					const _width = container.offsetWidth;
					const _height = container.offsetHeight;
					const ops = {
						width: _width - 2,
						height: _height - 2,
						useCORS: true,
						x: 1,
						y: 1,
						// allowTaint: false,
						dpi: 600,
						scale
						// foreignObjectRendering: true, //是否在浏览器支持的情况下使用ForeignObject渲染
						// async: false, //是否异步解析和呈现元素
					};

					return html2canvas(container, ops).then(canvas => {
						// 返回图片的二进制数据
						return canvas.toDataURL("image/png");
					});
				}
				const imgBlobData = await convertToImage(document.querySelector('#box'));
				this.imgBlobData = imgBlobData
				// #endif
			},
			// 图片长按事件
			savePhoto() {
				this.$refs.min_loading.open('保存中...');
				let that = this
				uni.canvasToTempFilePath({
					canvasId: "firstCanvas",
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (ress) => {
								that.$refs.min_loading.close();
								that.$u.toast('保存成功')
							},
							complete: () => {
								that.$refs.min_loading.close();
							}
						})
					}
				})
			},
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
		},
		computed: {
			...mapState(["hasLogin", "uerInfo"]),
			// userData() {
			// 	let data = {};
			// 	if (this.$store.state.hasLogin && this.$store.state.uerInfo) {
			// 		data = this.$store.state.uerInfo;
			// 		data["avatarUrl"] = data.headPortraitUrl ? this.pathImg + data.headPortraitUrl : require(
			// 			"@/static/detail/avatar.png");
			// 		data["name"] = data.nickname ? data.nickname : "第" + data.id + "位数字藏家";
			// 	}
			// 	console.log(data,'00000')
			// 	return data;
			// },
		},
	}
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
	}

	.inviteFriends {
		width: 100%;
		height: 100%;
		padding-top: 216upx;

		.bgImg {
			// height: 756upx;
			width: 100%;
			height: 662upx;
			background-image: url("@/static/login/bg.png");
			background-size: 100% 662upx;
			background-repeat: no-repeat;
			text-align: center;
			color: #fff;
			position: fixed;
			top: 0;
			left: 0;

		}

		.share {
			width: 100%;
			padding: 0 20upx;
			position: relative;
			z-index: 1;

			.share-img {
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			.box {
				width: 100%;
				height: 100%;
				// background: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				z-index: 9;
				padding-top: 104upx;

				.header-img {
					width: 120upx;
					height: 120upx;

					.img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}

				}

				.nickName {
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					margin: 20upx 0 36upx;
				}

				.referCode {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #C09B3A;

					.code {
						margin: 0 20upx;
					}

					.btn {
						font-size: 14px;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						padding: 4upx 6upx;
						background: #CEA539;
						border-radius: 4upx;
					}
				}

				.tips {
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					padding-top: 40upx;
				}

				.qrcode {
					width: 220upx;
					height: 220upx;
				}

				#qrcode1 {
					width: 220upx;
					height: 220upx;
				}
			}
		}

		.bottom-btn {
			width: 100%;
			padding: 0 68upx;
			margin-top: 110upx;

			.share-btn {
				width: 100%;
				height: 96upx;
				background: #CEA539;
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}

	.backImg {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		padding: 40upx;
		display: flex;
		justify-content: space-between;
		color: #fff;
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: bold;

		.backImg-left {
			display: flex;
			align-items: center;

			image {
				width: 20upx;
				height: 45upx;
			}
		}

		.backImg-right {
			display: flex;
			justify-content: flex-end;
			align-items: center;

			image {
				width: 44upx;
				height: 36upx;
				margin-left: 10upx;
			}

			.share {
				width: 36upx;
				height: 36upx;
			}
		}
	}

	.con-box33 {
		width: 670upx;
		/* #ifdef APP-PLUS */
		min-height: 100vh;
		/* #endif */
		height: 80vh;
		// overflow: hidden;
		background-color: rgba(0, 0, 0, .6);
		position: relative;
		border-radius: 16upx;

		.main {
			width: 100%;
			height: 100%;
			border-radius: 16upx;
			// height: calc(100vh - 300upx);
			background-color: rgba(0, 0, 0, .6);
			position: relative;

			.code_img {
				display: block;
				width: 100%;
				height: 100%;
				// height: calc(100% - 200upx);
				// position: absolute;
				// top: 0;
				// left: 0;
				z-index: 99;
			}

			.logo_img {
				width: 180upx;
				position: absolute;
				top: 56upx;
				left: 60upx;
				z-index: 100;
			}

			.code {
				width: 100%;
				padding: 0 36upx;
				display: flex;
				align-content: center;
				justify-content: space-between;
				align-items: center;
				// justify-content: center;
				position: absolute;
				left: 0;
				bottom: 160upx;
				z-index: 999;

				.code-top {
					width: 100%;
					// hei
				}

				.code_left {

					.userTop {
						display: flex;
						align-items: center;

						.img {
							display: block;
							width: 76upx;
							height: 76upx;
							border-radius: 50%;
						}
					}

					.text {
						width: 100%;
						font-size: 24upx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #7C5820;
						margin-top: 15upx;
						transform: scale(.8);
						text-align: left;
					}

					.InvitationCode {
						border: 4upx solid #F4E0BD;
						border-radius: 50upx;
						line-height: 64upx;
						text-align: center;
						font-size: 26upx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #7C5820;
						background: #FFFFFF;
						border: 1px solid #C99036;
						margin-top: 20upx;
					}

					.userHead {
						width: 64upx;
						height: 64upx;
						border-radius: 50%;
						overflow: hidden;
						margin: 0 6upx;
						position: relative;
						display: flex;
						align-items: center;

						.avatarUrl {
							display: inline-block;
							width: 100%;
						}
					}

					.userName {
						font-size: 36upx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #C99036;
						padding-left: 16upx;
					}

				}

				.code_right {
					width: 200upx;
					height: 200upx;
					overflow: hidden;

					.qrcode {
						width: 100%;
						height: 100%;
					}

					text {
						margin-right: 6upx;
					}
				}
			}

		}



		.container_text {
			text-align: center;
			margin-top: 20upx;
			position: absolute;
			width: 100%;
			left: 0;
			bottom: -60upx;
			z-index: 9999;
			font-family: PingFang SC;
			font-style: normal;
			font-weight: 500;
			font-size: 26upx;
			line-height: 36upx;
			color: #FFFFFF;

		}

		.imgBlob {
			border-radius: 16upx;
			position: absolute;
			top: -2upx;
			left: 0;
			width: 100%;
			height: 100%;
			// background-color: #000;
			z-index: 999;

			image {
				border-radius: 16upx;
				display: block;
				width: 100%;
				height: 100%;
				// height: 100%;
				// padding: 40upx;
				box-sizing: border-box;
				// padding-bottom: 102upx;
			}
		}
	}

	.guanbi {
		width: 50upx;
		height: 50upx;
		position: absolute;
		top: 40upx;
		right: 40upx;
		background: url('../../../static/user/guanbi.png') no-repeat center center;
		background-size: 100% 100%;
		z-index: 9999;
	}
</style>
